<template>
  <Table :columns="columns" :get-data="getSkuListApi" :pagination="true">
    <template #img="{ row }">
      <img :src="row.skuDefaultImg" :alt="row.skuName" class="sku-img" />
    </template>

    <template #btns="{ row }">
      <el-button type="primary" link>上架</el-button>
      <el-button type="primary" link>编辑</el-button>
      <el-button type="primary" link>查看</el-button>
      <el-button type="primary" link>删除</el-button>
    </template>
  </Table>
</template>

<script lang="ts">
export default {
  name: "TableTest",
};
</script>

<script lang="ts" setup>
import Table from "@/components/Table/index.vue";
import { getSkuListApi } from "@/api/product/sku";
import { ref } from "vue";

const columns = ref([
  {
    type: "index",
    align: "center",
    label: "序号",
    width: 60,
  },
  {
    label: "名称",
    prop: "skuName",
  },
  {
    label: "描述",
    prop: "skuDesc",
  },
  {
    label: "默认图片",
    slot: "img",
  },
  {
    label: "操作",
    slot: "btns",
  },
]);
</script>

<style scoped>
.sku-img {
  width: 50px;
  height: 50px;
}
</style>
